import { Component } from 'react'
import { Link } from 'react-router-dom'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'
import {
  Card,
  Breadcrumb,
  Form,
  Select,
  Button,
  Radio,
  DatePicker,
  Table,
  Tag,
  Space,
  Modal
} from 'antd'

import { http } from '../../utils/http'
import errorImg from '../../assets/error.png'
import './index.scss'

const { RangePicker } = DatePicker
const { confirm } = Modal
const { Option } = Select

class Article extends Component {
  state = {
    list: [],
    count: 0,
    channels: [],

    isShowDelModal: false
  }

  columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render: cover => {
        return <img src={cover || errorImg} width={200} height={150} alt="" />
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: status => {
        return <Tag color="green">审核通过</Tag>
      }
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate'
    },
    {
      title: '阅读数',
      dataIndex: 'read_count'
    },
    {
      title: '评论数',
      dataIndex: 'comment_count'
    },
    {
      title: '点赞数',
      dataIndex: 'like_count'
    },
    {
      title: '操作',
      render: data => (
        <Space size="middle">
          <Button
            type="primary"
            shape="circle"
            icon={<EditOutlined />}
            onClick={() => this.props.history.push(`/home/publish/${data.id}`)}
          />
          <Button
            type="primary"
            danger
            shape="circle"
            icon={<DeleteOutlined />}
            onClick={() => this.delArticle(data.id)}
          />
        </Space>
      )
    }
  ]

  // 删除文章
  delArticle = id => {
    confirm({
      title: '温馨提示',
      icon: <ExclamationCircleOutlined />,
      content: '此操作将永久删除该文章, 是否继续?',
      onOk: async () => {
        const res = await http.delete(`/mp/articles/${id}`)
        console.log('delete', res)
        // TODO:
        this.getArticles({})
      }
    })
  }

  getArticles = async params => {
    const res = await http.get('/mp/articles', {
      params
    })
    // console.log('res', res)
    const { results, total_count } = res.data.data
    this.setState({
      list: results.map(item => {
        return {
          ...item,
          cover: item.cover.images[0]
        }
      }),
      count: total_count
    })
  }

  async componentDidMount() {
    this.getArticles({})

    const res = await http.get('/channels')
    const { channels } = res.data.data

    this.setState({
      channels
    })
  }

  onFormFinish = values => {
    const { status, channel_id, date } = values

    // 组装数据
    const params = {}
    console.log(status)
    if (status !== -1) {
      params.status = status
    }
    if (channel_id) {
      params.channel_id = channel_id
    }
    if (date) {
      const begin_pubdate = date[0].format('YYYY-MM-DD')
      const end_pubdate = date[1].format('YYYY-MM-DD')
      params.begin_pubdate = begin_pubdate
      params.end_pubdate = end_pubdate
    }

    this.getArticles(params)
  }

  render() {
    return (
      <div>
        <Card
          title={
            <Breadcrumb separator=">">
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>内容管理</Breadcrumb.Item>
            </Breadcrumb>
          }
          style={{ marginBottom: 20 }}
        >
          <Form
            name="basic"
            initialValues={{ status: -1 }}
            onFinish={this.onFormFinish}
          >
            <Form.Item label="状态" name="status">
              <Radio.Group>
                <Radio value={-1}>全部</Radio>
                <Radio value={0}>草稿</Radio>
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>审核通过</Radio>
                <Radio value={3}>审核失败</Radio>
                <Radio value={4}>已删除</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item label="频道" name="channel_id">
              <Select placeholder="请选择文章频道" style={{ width: 200 }}>
                {this.state.channels.map(item => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item label="日期" name="date">
              <RangePicker></RangePicker>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                style={{ marginLeft: 80 }}
              >
                筛选
              </Button>
            </Form.Item>
          </Form>
        </Card>

        <Card title={`根据筛选条件共查询到 ${this.state.count} 条结果：`}>
          <Table
            pagination={{
              position: ['bottomLeft'],
              total: this.state.count,
              showSizeChanger: false
            }}
            columns={this.columns}
            dataSource={this.state.list}
            rowKey="id"
          />
        </Card>
      </div>
    )
  }
}

export default Article
